<script setup lang="ts">
import { ref, computed } from "vue";
import { addClass, removeClass } from "@/utils/operate";
import bg from "@/assets/login/bg.png";
import logo from "@/assets/logo.png";
import illustration0 from "@/assets/login/illustration0.svg";
import illustration1 from "@/assets/login/illustration1.svg";
import illustration2 from "@/assets/login/illustration2.svg";
import illustration3 from "@/assets/login/illustration3.svg";
import illustration4 from "@/assets/login/illustration4.svg";
import illustration5 from "@/assets/login/illustration5.svg";
import illustration6 from "@/assets/login/illustration6.svg";

// eslint-disable-next-line vue/return-in-computed-property
// 按周从周一到周日，每天切换不同的登录界面图片
const currentWeek = computed(() => {
  switch (String(new Date().getDay())) {
    case "0":
      return illustration0;
    case "1":
      return illustration1;
    case "2":
      return illustration2;
    case "3":
      return illustration3;
    case "4":
      return illustration4;
    case "5":
      return illustration5;
    case "6":
      return illustration6;
    default:
      return illustration4;
  }
});

let account = ref("");
let password = ref("");

import { useRouter,useRoute } from "vue-router";
import {login} from "@/api/user";
import {successMessage,errorMessage} from "@/utils/message";
import { storageLocal } from "@/utils/storage";
import { setToken } from "@/utils/auth";

const route = useRoute();
const router = useRouter();

// 登录点击事件
const onLogin = () => {
  if(account.value == ""){
    errorMessage("用户名不能为空");
    return false;
  }
  if(password.value == ""){
    errorMessage("密码不能为空");
    return false;
  }
  var loginData = {
    account:"",
    password:"",
  };
  loginData.account = account.value;
  loginData.password = password.value;
  login(loginData).then((res:any)=>{
    storageLocal.setItem("userInfo", res.data);
    successMessage(res.info);
    setToken(res);
    // 如果用户真正访问的页面需要登录权限，在跳转到登陆页用户登陆后，需重新跳转到用户真正要访问的页面
    router.push({ path: route.query.redirect&&route.query.redirect as string || '/' });
  });
};
// 用户名聚焦事件
function onUserFocus() {
  addClass(document.querySelector(".account"), "focus");
}
// 用户名失焦事件
function onUserBlur() {
  if (account.value.length === 0)
    removeClass(document.querySelector(".account"), "focus");
}
// 密码聚焦事件
function onPwdFocus() {
  addClass(document.querySelector(".password"), "focus");
}
// 密码失焦事件
function onPwdBlur() {
  if (password.value.length === 0)
    removeClass(document.querySelector(".password"), "focus");
}
</script>

<template>
  <img :src="bg" class="wave" />
  <div class="login-container">
    <div class="login-img"><component :is="currentWeek"></component></div>
    <div class="login-box">
      <div class="login-form">
        <img :src="logo" class="logo" />
        <h2 v-motion :initial="{ opacity: 0, y: 100 }" :enter="{ opacity: 1, y: 0, transition: { delay: 100 } }">vue admin system</h2>
        <div class="input-group account focus" v-motion :initial="{ opacity: 0,  y: 100 }" :enter="{ opacity: 1, y: 0, transition: { delay: 200 } }" >
          <div class="item-icon"><el-icon><svg-icon icon-class="user"></svg-icon></el-icon></div>
          <div class="item-input">
            <h5>用户名</h5>
            <input type="text" class="input" v-model="account" @focus="onUserFocus" @blur="onUserBlur" />
          </div>
        </div>
        <div class="input-group password focus" v-motion :initial="{opacity: 0,y: 100}" :enter="{opacity: 1,y: 0,transition: {delay: 300}}">
          <div class="item-icon"><el-icon><svg-icon icon-class="lock"></svg-icon></el-icon></div>
          <div class="item-input">
            <h5>密码</h5>
            <input type="password" class="input" v-model="password" @focus="onPwdFocus" @blur="onPwdBlur"/>
          </div>
        </div>
        <button class="btn-login" v-motion :initial="{opacity: 0,y: 10}" :enter="{opacity: 1,y: 0,transition: {delay: 400} }" @click="onLogin">登录</button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.wave {
  position: fixed;
  height: 100%;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.login-container {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 18rem;
  padding: 0 2rem;
}
.login-img {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.login-box {
  display: flex;
  align-items: center;
  text-align: center;
  .login-form {
    width: 360px;
    .logo {
      display: block;
      margin: 0 auto;
      height: 80px;
    }
    h2 {
      text-transform: uppercase;
      margin: 15px 0;
      color: #999;
    }
  }
}

.input-group {
  position: relative;
  display: flex;
  margin: 25px 0;
  padding: 5px 0;
  border-bottom: 1px solid #d9d9d9;
  &:before,&:after{
    content: "";
    position: absolute;
    bottom: -1px;
    width: 0;
    height: 1px;
    background-color: #c5d3f7;
    transition: 0.5s;
  }
  &:before {
    left: 50%;
  }
  &:after {
    right: 50%;
  }
  &.focus{
    &:before,&:after{
      width: 50%;
    }
    .item-icon{
      color: #5392f0;
    }
    .item-input{
      h5{
        top: -5px;
        font-size: 15px;
      }
    }
  }
  .item-icon{
    width: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #d9d9d9;
  }
  .item-input{
    flex:1;
    height: 44px;
    position:relative;
    h5 {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: #d9d9d9;
      font-size: 16px;
      transition: 0.3s;
      margin: 0;
      padding: 0;
      font-weight: normal;
    }
    .input {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border: none;
      outline: none;
      background: none;
      padding: 0.5rem 0.7rem;
      font-size: 1.2rem;
      color: #555;
      &:-webkit-autofill,&:-webkit-autofill:hover,&:-webkit-autofill:focus,&:-webkit-autofill:active{
        -webkit-transition-delay: 99999s;
        -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
      }
    }
  }
}

.btn-login {
  display: block;
  width: 100%;
  height: 50px;
  border-radius: 25px;
  margin: 1rem 0;
  font-size: 1.2rem;
  outline: none;
  border: none;
  background-image: linear-gradient(to right, #567dbe, #5392f0, #567dbe);
  cursor: pointer;
  color: #fff;
  text-transform: uppercase;
  background-size: 200%;
  transition: 0.5s;
  &:hover {
    background-position: right;
  }
}

@media screen and (max-width: 1080px) {
  .login-container {
    grid-gap: 9rem;
  }
}

@media screen and (max-width: 1024px) {
  .login-form {
    width: 290px;
    h2 {
      font-size: 2.4rem;
      margin: 8px 0;
    }
  }
  .logo {
    height: 40px;
  }
}

@media screen and (max-width: 768px) {
  .wave {
    display: none;
  }
  .login-img {
    display: none;
  }
  .login-container {
    grid-template-columns: 1fr;
  }
  .login-box {
    justify-content: center;
  }
}
</style>